<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<head>
  <meta charset="utf-8">
  <title>{$site_config['site_title']}</title>
  <meta content="{$site_config['site_description']}" name="description">
  <meta content="{$site_config['site_keywords']}" name="keywords">
  <meta property="og:site_name" content="{$site_config['site_name']}">
  <meta property="og:title" content="{$site_config['site_title']}">
  <meta property="og:description" content="{$site_config['site_description']}">
  <meta property="og:type" content="website">
  <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
  <meta property="og:url" content="//{$_SERVER['HTTP_HOST']}/">

  {template tpl_header_source.html}
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body>
    {template tpl_header.html}

    <!-- BEGIN SLIDER -->
    <div class="page-slider margin-bottom-35">
      <!--LayerSlider begin-->
      <div id="layerslider" style="width: 100%; height: 494px; margin: 0 auto;">
          <!--LayerSlider layer-->
          <div class="ls-layer ls-layer1" style="slidedirection: right; transition2d: 24,25,27,28; ">
            <img src="assets/temp/sliders/slide1/bg.jpg" class="ls-bg" alt="Slide background">
            <div class="ls-s-1 title" style=" top: 96px; left: 35%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
              Tones of <strong>shop UI features</strong> designed
            </div>
            <div class="ls-s-1 mini-text" style=" top: 338px; left: 35%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; showuntil : 4000; white-space: nowrap;">
              Lorem ipsum dolor sit amet  constectetuer diam<br > adipiscing elit euismod ut laoreet dolore.
            </div>
          </div>

          <!--LayerSlider layer-->
          <div class="ls-layer ls-layer2" style="slidedirection: right; transition2d: 110,111,112,113; ">
            <img src="assets/temp/sliders/slide2/bg.jpg" class="ls-bg" alt="Slide background">
            <div class="ls-s-1 ls-title title" style=" top: 40%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
              <strong class="title">Unlimted</strong>
              Layout Options
              <em class="title">Fully Responsive</em>
            </div>

            <div class="ls-s-2 ls-price title" style=" top: 50%; left: 45%; slidedirection : fade; slideoutdirection : fade; durationout : 109750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap;">
              <b>from</b>
              <strong><span>$</span>25</strong>
            </div>

            <a href="javascript:;" class="ls-s-1 ls-more mini-text" style=" top: 72%; left: 21%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; display: inline-block; white-space: nowrap;">
              See More Details
            </a>
          </div>

          <!--LayerSlider layer-->
          <div class="ls-layer ls-layer3" style="slidedirection: right; transition2d: 92,93,105; ">
            <img src="assets/temp/sliders/slide3/bg.jpg" class="ls-bg" alt="Slide background">

            <div class="ls-s-1 ls-title" style=" top: 83px; left: 33%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
              Full Admin & Frontend
              <strong>eCommerce UI</strong>
              Is Ready For Your Project
            </div>

            <div class="ls-s-1" style=" top: 333px; left: 33%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap; font-size: 20px; font: 20px 'Open Sans Light', sans-serif;">
              <a href="javascript:;" class="ls-buy">
                Buy It Now!
              </a>
              <div class="ls-price">
                <span>All these for only:</span>
                <strong>25<sup>$</sup></strong>
              </div>
            </div>
          </div>

          <!--LayerSlider layer-->
          <div class="ls-layer ls-layer5" style="slidedirection: right; transition2d: 110,111,112,113; ">
            <img src="assets/temp/sliders/slide5/bg.jpg" class="ls-bg" alt="Slide background">

            <div class="ls-s-1 title" style=" top: 35%; left: 60%; slidedirection : fade; slideoutdirection : fade; durationin : 750; durationout : 750; easingin : easeOutQuint; rotatein : 90; rotateout : -90; scalein : .5; scaleout : .5; showuntil : 4000; white-space: nowrap;">
              The most<br>
              wanted bijouterie
            </div>

            <div class="ls-s-1 mini-text" style=" top: 70%; left: 60%; slidedirection : fade; slideoutdirection : fade; durationout : 750; easingin : easeOutQuint; delayin : 300; scalein : .8; scaleout : .8; showuntil : 4000; white-space: nowrap;">
              <span>Lorem ipsum and</span>
              <a href="javascript:;">Buy It Now!</a>
            </div>
          </div>
      </div>
      <!--LayerSlider end-->
    </div>
    <!-- END SLIDER -->

    <div class="main">
      <div class="container">
        <!-- BEGIN SALE PRODUCT & NEW ARRIVALS -->
        <div class="row margin-bottom-40">
          <!-- BEGIN SALE PRODUCT -->
          <div class="col-md-12 sale-product">
            <h2>新品推荐</h2>
            <div class="bxslider-wrapper">
            	{if($products_data)}
              <ul class="bxslider" data-slides-phone="1" data-slides-tablet="2" data-slides-desktop="5" data-slide-margin="15">
              	{loop $products_data $k1 $v1}
                <li>
                  <div class="product-item">
                    <div class="pi-img-wrapper">
                      <img src="{$v1['image'][0]}" class="img-responsive" alt="{$v1['title']}">
                      <div>
                        <a href="{$v1['image'][0]}" class="btn btn-default fancybox-button">放大</a>
                        <a href="#product-pop-up" class="btn btn-default fancybox-fast-view" onclick="apps.product_pop_up(this)" product-data='{ephp}echo json_encode($v1);{/ephp}'>详情</a>
                      </div>
                    </div>
                    <h3><a href="{$v1['product_url']}">{$v1['title']}</a></h3>
                    <div class="pi-price">￥{$v1['price']}</div>
                    <a href="javascript:;" class="btn btn-default add2cart" onclick="apps['cart-add']({$v1['id']},1);">加入购物车</a>
                    <div class="sticker sticker-new"></div>
                  </div>
                </li>
                {/loop}
              </ul>
              {/if}
            </div>
          </div>
          <!-- END SALE PRODUCT -->
        </div>
        <!-- END SALE PRODUCT & NEW ARRIVALS -->
        
        <!-- BEGIN SALE PRODUCT & SECTION DATA -->
        <div class="row margin-bottom-40">
          <!-- BEGIN SALE PRODUCT -->
          {ephp}$_section_data = EsiteApp::app()->products_section_data(1, 20);{/ephp}
          {if($_section_data)}{loop $_section_data $k0 $v0}
          {ephp}$n = isset($n)?$n+1:1;{/ephp}
          <div class="col-md-12 sale-product">
            <h2>#{$n}&nbsp;{$v0['cat_name']}</h2>
            <div class="bxslider-wrapper">
            	{if($v0['products'])}
              <ul class="bxslider" data-slides-phone="1" data-slides-tablet="2" data-slides-desktop="5" data-slide-margin="15">
              	{loop $v0['products'] $k1 $v1}
                <li>
                  <div class="product-item">
                    <div class="pi-img-wrapper">
                      <img src="{$v1['image'][0]}" class="img-responsive" alt="{$v1['title']}">
                      <div>
                        <a href="{$v1['image'][0]}" class="btn btn-default fancybox-button">放大</a>
                        <a href="#product-pop-up" class="btn btn-default fancybox-fast-view" onclick="apps.product_pop_up(this)" product-data='{ephp}echo json_encode($v1);{/ephp}'>详情</a>
                      </div>
                    </div>
                    <h3><a href="{$v1['product_url']}">{$v1['title']}</a></h3>
                    <div class="pi-price">￥{$v1['price']}</div>
                    <a href="javascript:;" class="btn btn-default add2cart" onclick="apps['cart-add']({$v1['id']},1);">加入购物车</a>
                    <div class="sticker sticker-sale"></div>
                  </div>
                </li>
                {/loop}
              </ul>
              {/if}
            </div>
          </div>
          {/loop}{/if}
          <!-- END SALE PRODUCT -->
        </div>
        <!-- END SALE PRODUCT & SECTION DATA -->

        <!-- BEGIN TWO PRODUCTS & PROMO -->
        <div class="row margin-bottom-35 ">
          <!-- BEGIN TWO PRODUCTS -->
          <div class="col-md-6 two-items-bottom-items">
            <h2>猜你喜欢</h2>
            <div class="bxslider-wrapper">
            	{if($products_data)}
            	{ephp}shuffle($products_data);{/ephp}
              <ul class="bxslider" data-slides-phone="1" data-slides-tablet="2" data-slides-desktop="2" data-slide-margin="15">
              	{loop $products_data $k1 $v1}
                <li>
                  <div class="product-item">
                    <div class="pi-img-wrapper">
                      <img src="{$v1['image'][0]}" class="img-responsive" alt="{$v1['title']}">
                      <div>
                        <a href="{$v1['image'][0]}" class="btn btn-default fancybox-button">放大</a>
                        <a href="#product-pop-up" class="btn btn-default fancybox-fast-view" onclick="apps.product_pop_up(this)" product-data='{ephp}echo json_encode($v1);{/ephp}'>详情</a>
                      </div>
                    </div>
                    <h3><a href="{$v1['product_url']}">{$v1['title']}</a></h3>
                    <div class="pi-price">￥{$v1['price']}</div>
                    <a href="javascript:;" class="btn btn-default add2cart" onclick="apps['cart-add']({$v1['id']},1);">加入购物车</a>
                  </div>
                </li>
                {/loop}
              </ul>
              {/if}
            </div>
          </div>
          <!-- END TWO PRODUCTS -->
          <!-- BEGIN PROMO -->
          <div class="col-md-6">
            <div class="content-slider">
            	{ephp}$_slide_data = EsiteApp::app()->slide_data('home-bottom-ads');{/ephp}
              <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                {if($_slide_data)}
                <ol class="carousel-indicators">
                	{loop $_slide_data $k1 $v1}
                  <li data-target="#myCarousel" data-slide-to="{$k1}" class="{ephp}echo $k1==0?'active':'';{/ephp}"></li>
                  {/loop}
                </ol>
                <div class="carousel-inner">
                	{loop $_slide_data $k1 $v1}
                  <div class="item {ephp}echo $k1==0?'active':'';{/ephp}"><img src="{$v1['img']}" class="img-responsive" alt="{$v1['name']}&#13;{$v1['notes']}"></div>
                  {/loop}
                </div>
                {/if}
              </div>
            </div>
          </div>
          <!-- END PROMO -->
        </div>        
        <!-- END TWO PRODUCTS & PROMO -->
      </div>
    </div>

    {template tpl_brands.html}

    {template tpl_steps.html}

    {template tpl_footer.html}
    
    {template tpl_product_fast_view.html}

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
    <script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script><!-- pop up -->
    <script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.min.js"></script><!-- slider for products -->
    <script type="text/javascript" src='assets/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
    <script src="assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script><!-- Quantity -->

    <!-- BEGIN LayerSlider -->
    <script src="assets/plugins/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
    <script src="assets/plugins/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
    <script src="assets/plugins/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
    <script src="assets/plugins/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
    <!-- END LayerSlider -->
    <script type="text/javascript">
        jQuery(document).ready(function(){
            App.init();
            App.initBxSlider();
            Index.initLayerSlider();
            App.initImageZoom();
            App.initTouchspin();
        });
    </script>
    <!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>